import React from 'react'
import '@/assets/css/pay.scoped.css'

const Component = () =>
{
    let orderid = React.params('orderid') ?? 0
    let [order, SetOrder] = useState<object | any>({})
    let [notice, SetNotice] = useState('付款金额要与显示的金额一致，否则后果自负')
    let [maxtime, SetMax] = useState<number | any>(0) //总秒数
    let T1 = useRef<any | null>(null);
    let T2 = useRef<any | null>(null); //定时器
    
    React.useEffect(() => {
        OrderData()
    }, [])
    
    React.useEffect(() => {
        if(maxtime == 180)
        {
            T1.current = setInterval(() => SetMax((prev) => prev - 1), 1000)
        }else if(maxtime == 0)
        {
            clearInterval(T1.current)
            clearInterval(T2.current)

            SetOrder({
                ...order,
                wxcode: require('@/assets/pay/images/qrcode_timeout.png'),
                zfbcode: require('@/assets/pay/images/qrcode_timeout.png'),
            })

            SetNotice('订单已失效，请手动关闭页面，请重新下单')
        }
    }, [maxtime])

    const OrderData = async () =>
    {
        var params = {
            busid: React.business.id,
            orderid,
        }

        var result = await React.request.post('/order/pay', params)

        if(result.code == 0)
        {
            React.toast(result.msg, null, 'fail')
            return false
        }

        SetOrder(result.data)

        SetMax(180)

        const query = async () =>
        {
            var res = await React.request.post('/order/query', {payid: result.data.id})

            if(res.code == 0)
            {
                React.toast(res.msg, null, 'fail')
                return false
            }

            //已支付
            if(res.data.status == '1')
            {
                clearInterval(T1.current)
                clearInterval(T2.current)

                React.toast('支付成功', res.data.jump, 'success')
                return false
            }
        }

        T2.current = setInterval(query, 5000)
    }

    return (
        <>
            <h1 className="mod-title">
                <span className={order.type == "zfb" ? "ico_log ico-4" : "ico_log ico-3"}></span>
            </h1>

            <div className="mod-ct">
                <div className="order"></div>

                <div style={{marginTop: '10px'}}>
                    <span style={{color: 'red'}}>提示：{notice}</span>
                </div>

                <div className="amount" id="money">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" className="amount2">{order.price}</span>元
                    <span style={{fontSize: '10px', color: 'darkcyan'}}>&nbsp;&nbsp;复制金额</span>
                </div>

                <div className="qrcode-img-wrapper">
                    <div className="qrcode-img-area">
                        <div className="ui-loading qrcode-loading" style={{display:'none'}}></div>
                        <div style={{position: 'relative', display: 'inline-block'}}>
                        <img id="imgCode" src={order.type == 'wx' ? order.wxcode : order.zfbcode} style={{width: '220px'}} />
                        </div>
                    </div>
                </div>

                <div className="time-item" style={{paddingTop: '10px'}}>
                    <div className="time-item" id="msg">
                        <h1 className="overtime">订单名称：<span>{order.name}</span></h1>
                    </div>

                    <div className="time-item">
                        <h1>订单号:<span>{order.code}</span></h1>
                    </div>

                    <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
                    <strong id="second_show">{maxtime}秒</strong>
                    <div className="time-item"></div>
                </div>

                <div className="tip">
                    <div className="ico-scan"></div>
                    <div className="tip-text">
                    <p id="showtext">{order.type == 'wx' ? '打开微信[扫一扫]' : '打开支付宝[扫一扫]'}</p>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Component